<!-- 
	搜索
 -->
<template>
	<view class="search-all-box">
		<view class="search-top bg-fa"  :style="{'paddingBottom':StatusBar == 0 ? '10px' : StatusBar+'px'}">
			<view :style="{'height':StatusBar == 0 ? '10px' : StatusBar+'px'}"></view>
			<search-top @toSearch="goSearchList"></search-top>
		</view>
		
		<view class="history-box" v-if="historyList.length > 0">
			<view class="title">
				历史记录:
			</view>
			<text class="text" v-for="(item,index) in historyList " :key="index" @tap="tapHistory(item)">
				{{item}}
			</text>
		</view>
		
		<view class="del-box" v-if="historyList.length > 0">
			<view class="del" @tap="clearHistort">
				<text class="iconfont iconlajitong"></text>
				清空历史记录
			</view>
		</view>
		
	</view>
</template>

<script>
	import searchTop from "@/components/search-top.vue"
	import {setHistoryStorage} from "@/utils/setStorage.js"
	export default {
		name:"searchAll",
		data(){
			return {
				/*  顶部标题栏高度  */
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				historyList:[],
			}
		},
		components:{
			searchTop
		},
		methods:{
			
			/*  清空历史记录  */
			clearHistort(){
				uni.removeStorageSync('historyList')
				this.historyList = []
			},
			
			/*  点击历史记录  */
			tapHistory(val){
				setHistoryStorage(val)
				this.$store.commit("search/setSearchValue",val)
				uni.navigateTo({
					url:"/pages/search/list"
				})
			},
			
			/*  去搜索列表页面  */
			goSearchList(){
				uni.navigateTo({
					url:"/pages/search/list"
				})
			},
		},
		
		onLoad() {
			let value = uni.getStorageSync('historyList')
			this.historyList = value
		}
		
	}
</script>

<style scoped lang="scss">
	page{
		background: #F1F1F1;
	}
	.search-all-box{
		.search-top{
			width: 100%;
			padding: 0 20rpx 20px 20rpx ;
		}
		.history-box{
			padding: 0 10rpx 40rpx 10rpx;
			border-bottom: 2rpx solid #dbdbdb;
			
			.title{
				color: #888888;
				font-size: 32rpx;
				padding-top: 12rpx;
			}
			.text{
				display: inline-block;
				line-height: 24rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				background: #FA436A;
				padding: 8rpx 16rpx;
				margin-right: 40rpx;
				margin-top: 20rpx;
				border-radius: 50rpx 50rpx;
			}
		}
		.del-box{
			width: 100%;
			padding-top: 40rpx;
			text-align: center;
			.del{
				display: inline-block;
				color: #7d7d7d;
				font-size: 24rpx;
				line-height: 40rpx;
				background: #DDDDDD;
				padding:0 30rpx;
				border-radius: 60rpx 60rpx;
				.iconfont{
					font-size: 40rpx;
					color: #7d7d7d;
					vertical-align: sub;
				}
			}
		}
	}
	
</style>
